<!DOCTYPE html>
<html lang="en">
<head>
    <style>

    </style>

</head>
<body>
<form class="page-search layui-form" lay-filter="search-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input name="search-key" placeholder="请输入姓名" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn" lay-submit lay-filter="search-submit">查询</button>
        </div>
        <div class="layui-inline">
            <button class="layui-btn create-btn">新建</button>
        </div>
    </div>
</form>
<table class="layui-hide" id="table" lay-filter="table"></table>
<div id="pagination"></div>

</body>

<script type="text/html" id="tableBar">
    <button class="layui-btn layui-btn-xs" lay-event="update">更新</button>
    <button class="layui-btn layui-btn-xs layui-btn-danger ares-mr" lay-event="modify">重置密码</button>
    {{#  if(d.disable){ }}
    <input type="checkbox" name="status" lay-skin="switch" data-user-id={{d.id}} lay-filter="status">
    {{#  } else { }}
    <input type="checkbox" name="status" lay-skin="switch" checked data-user-id={{d.id}}
           lay-filter="status">
    {{#  } }}
</script>
<script>
	layui.use(['table', 'form', 'laypage', 'conf', 'utils', 'filters', 'userServices', 'store'], function (table, form, laypage, config, utils, filters, userServices, store) {
		var $createBtn = $('.create-btn');
		init();
		utils.aresPageEventInit('updateUserList', function () {
			getPageList(1, config.pagination.limit);
		})

		/**
		 * @author: ares
		 * @date: 2021/4/28 11:34
		 * @description: 查询
		 */
		form.on('submit(search-submit)', function (data) {
			getPageList(1, config.pagination.limit);
			return false;
		});
		/**
		 * @author: ares
		 * @date: 2021/4/28 11:33
		 * @description: 启用禁用用户
		 */
		form.on('switch(status)', function (data) {
			userServices.disable($(data.elem).data('userId'), !data.elem.checked).then(function (res) {
				utils.msgSuccess(res.msg);
			}).catch(function (err) {
				data.elem.checked = !data.elem.checked;
				form.render();
			});
		});

        /**
         * @author: ares
         * @date: 2021/4/28 11:35
         * @description: 显示新增|更新模态框
         */
		function showPersonModal(title, id) {
			var queryStr = (typeof id == 'string' || typeof id == 'number') ? '?id=' + id : '';
			utils.layerOpen({
				type: 2,
				title: title,
				area: ['800px', '500px'],
				content: 'pages/user/form.html' + queryStr,
				end: function (index, layero) {
				}
			});
		}

		/**
		 * @author: ares
		 * @date: 2021/4/28 11:34
		 * @description: 更新
         * @param{object} data  当前用户信息
		 */
		function handlerUpdate(data) {
			showPersonModal('更新人员', data.id);
		}

		/**
		 * @author: ares
		 * @date: 2021/4/28 10:07
		 * @description: 分页查询
		 * @param{number} currentPage
		 * @param{number} pageSize
		 */
		function getPageList(currentPage, pageSize) {
			var params = {
				searchKey: $('input[name="search-key"]').val()
			};
			userServices.getPageList(currentPage, pageSize, params).then(function (res) {
				var data = res.data;
				utils.laypageRender(laypage, $.extend(config.pagination, {
						count: data.total,
						curr: data.currentPage
					}), function (obj) {
					getPageList(obj.curr, obj.limit);
				});
				table.render({
					elem: '#table',
					data: data.list,
					cellMinWidth: 80,
					cols: [[
						{title: '姓名', field: 'name'},
						{
							title: '性别',
							width: 50,
							templet: function (d) {
								return filters.sexFormat(d.sex);
							}
						},
						{title: '生日', field: 'birthday', width: 90},
						{title: '手机', field: 'mobile', width: 90},
						{title: '角色', templet: '<span>{{d.role.name}}</span>', width: 220},
						{title: '公司', templet: '<span>{{d.org.name}}</span>'},
						{title: '部门', templet: '<span>{{d.dept.name}}</span>'},
						{title: '操作', fixed: 'right', width: 180, templet: '#tableBar'}
					]]
				});
				table.on('tool(table)', function (obj) {
					var data = obj.data;
					switch (obj.event) {
						case 'update':
							handlerUpdate(data)
							break;
						case 'modify':
							handlerModifyPwd(data)
							break;
					}
				});
			});
		}

		/**
		 * @author: ares
		 * @date: 2021/3/12 16:20
		 * @description: 重置密码
		 * @param{object} data  当前人员信息
		 */
		function handlerModifyPwd(data) {
			utils.confirm('人员 "' + data.name + '" 的密码将被重置为默认密码(用户生日), 是否继续?', {
					icon: 3,
					title: '重置密码'
				}, function (index) {
					userServices.resetPwd(data.id).then(function (res) {
						utils.msgSuccess(res.msg);
						utils.layerClose(index);
					})
				}
			);
		}

		/**
		 * @author: ares
		 * @date: 2021/4/28 11:34
		 * @description: 新建
		 */
		$createBtn.on('click', function () {
			showPersonModal('新建人员')
			return false;
		})

        /**
         * @author: ares
         * @date: 2021/4/28 14:55
         * @description: 初始化
         */
        function init() {
	        getPageList(1, config.pagination.limit);
        }
	})
</script>


</html>